<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>做作业</title>
    <link rel="stylesheet" type="text/css"
          href="../bootstrap/bootstrap.4.1.0.css">
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../bootstrap/popper.12.5.min.js"></script>
    <script src="../bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="../layui/layer/layer.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
    <style>
        textarea{
            border-style: solid;
            border-top-width: 0px;
            border-right-width: 0px;
            border-bottom-width: 1px;
            border-left-width: 0px
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <h3>{{paper.paperName}}</h3><br>
    <h6>{{paper.paperDescription}},考试时长：
        <label class="text-primary">{{paper.paperDuration}}</label>分钟，剩余
        <label class="text-danger">{{remainTime}}</label>分钟
    </h6><br>
    <div v-if="questions!=null">
        <div v-for="(question,index) in questions">
            <div v-if="question.paperQuestionBank==1">
                <div>
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.selectTopic}}()<br>
                    </label>
                    <div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio"  class="custom-radio" value="A" v-model="question.paperDetailQuestion.studentAnswer"> A.{{question.paperDetailQuestion.selectOptionsa}}
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio"  class="custom-radio" value="B" v-model="question.paperDetailQuestion.studentAnswer"> B. {{question.paperDetailQuestion.selectOptionsb}}
                            </label>
                        </div>
                        <div class="form-check ">
                            <label class="form-check-label">
                                <input type="radio"  class="custom-radio" value="C" v-model="question.paperDetailQuestion.studentAnswer"> C. {{question.paperDetailQuestion.selectOptionsc}}
                            </label>
                        </div>
                        <div class="form-check ">
                            <label class="form-check-label">
                                <input type="radio"  class="custom-radio" value="D" v-model="question.paperDetailQuestion.studentAnswer"> D. {{question.paperDetailQuestion.selectOptionsd}}
                            </label>
                        </div>
                    </div>
                </div>
                <label>{{create(question.paperQuestionNumber,0,0)}}</label>
            </div>
            <div v-if="question.paperQuestionBank==2" >
                <div>
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.vacancyTopic}}
                    </label><br>
                    <form role="form">
                        <div class="form-group">
                            <textarea class="form-control" rows="1" v-model="question.paperDetailQuestion.studentAnswer"></textarea>
                        </div>
                    </form>
                </div>
                <label>{{create(question.paperQuestionNumber,0,0)}}</label>
            </div><br>
            <div v-if="question.paperQuestionBank==3">
                <label>{{question.paperQuestionNumber}}.</label>
                <label>
                    {{question.paperDetailQuestion.materialReading}}
                </label><br>
                <div v-if="question.paperDetailQuestion.selectBanks!=null">
                    <div v-for="(select,index) in question.paperDetailQuestion.selectBanks">
                        <div>
                            <label>{{question.paperQuestionNumber}}.{{addMnum()}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                            <label>
                                {{select.selectTopic}}()
                            </label><br>
                            <div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="radio"  class="custom-radio" value="A" v-model="select.studentAnswer"> A. {{select.selectOptionsa}}
                                    </label>
                                </div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="radio"  class="custom-radio" value="B" v-model="select.studentAnswer"> B. {{select.selectOptionsb}}
                                    </label>
                                </div>
                                <div class="form-check ">
                                    <label class="form-check-label">
                                        <input type="radio"  class="custom-radio" value="C" v-model="select.studentAnswer"> C. {{select.selectOptionsc}}
                                    </label>
                                </div>
                                <div class="form-check ">
                                    <label class="form-check-label">
                                        <input type="radio"  class="custom-radio" value="D" v-model="select.studentAnswer"> D. {{select.selectOptionsd}}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <label>{{create(question.paperQuestionNumber,1,0)}}</label>
                        <br>
                    </div><br>
                </div>
                <div v-if="question.paperDetailQuestion.vacancyBanks!=null">
                    <div v-for="vacancy in question.paperDetailQuestion.vacancyBanks">
                        <div>
                            <label>{{question.paperQuestionNumber}}.{{addMnum()}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                            <label>
                                {{vacancy.vacancyTopic}}
                            </label>
                            <form role="form">
                                <div class="form-group">
                                    <textarea class="form-control" rows="1" v-model="vacancy.studentAnswer"></textarea>
                                </div>
                            </form>
                        </div>
                        <label>{{create(question.paperQuestionNumber,1,0)}}</label>
                    </div><br>

                </div>
                <div v-if="question.paperDetailQuestion.judgeBanks!=null">
                    <div v-for="(judge,index) in question.paperDetailQuestion.judgeBanks">
                        <div>
                            <label>{{question.paperQuestionNumber}}.{{addMnum()}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                            <label>
                                {{judge.judgeTopic}}
                            </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio"  class="custom-radio" value="1" v-model="judge.studentAnswer"> <label>正确</label>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio"  class="custom-radio" value="0" v-model="judge.studentAnswer"> <label>错误</label>
                        </div>
                        <label>{{create(question.paperQuestionNumber,1,0)}}</label>
                    </div>
                </div>
                <label v-if="0==backMnum()"></label>
            </div><br>
            <div v-if="question.paperQuestionBank==4">
                <label>
                    {{question.paperQuestionNumber}}({{question.paperDetailQuestion.clozePoint}}分).
                    {{question.paperDetailQuestion.clozeTopic}}<br>
                </label>
                <div v-for="(clozeSelect,index) in question.paperDetailQuestion.clozeSelects">

                    <div>
                        <label>{{question.paperQuestionNumber}}.{{index+1}}</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        (&nbsp;)&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio"  class="custom-radio" value="A" v-model="clozeSelect.studentAnswer"> <label>A. {{clozeSelect.selectOptionsa}}&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <input type="radio"  class="custom-radio" value="B" v-model="clozeSelect.studentAnswer"> <label>B. {{clozeSelect.selectOptionsb}}&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <input type="radio"  class="custom-radio" value="C" v-model="clozeSelect.studentAnswer"> <label>C. {{clozeSelect.selectOptionsc}}&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <input type="radio"  class="custom-radio" value="D" v-model="clozeSelect.studentAnswer"> <label>D. {{clozeSelect.selectOptionsd}}&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    </div>
                    <label>{{create(question.paperQuestionNumber,2,index+1)}}</label>
                </div>
            </div><br>
            <div v-if="question.paperQuestionBank==6">
                <div>
                    <label>{{question.paperQuestionNumber}}.</label>
                    <label>
                        {{question.paperDetailQuestion.judgeTopic}}
                    </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio"  class="custom-radio" value="1" v-model="question.paperDetailQuestion.studentAnswer"> <label>正确</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio"  class="custom-radio" value="0" v-model="question.paperDetailQuestion.studentAnswer"> <label>错误</label>
                </div>
                <label>{{create(question.paperQuestionNumber,0,0)}}</label>
            </div><br>
            <div v-if="question.paperQuestionBank==7">
                <div>
                    <h6>{{question.paperQuestionNumber}}.作文，根据下列材料写作：</h6>
                    <label>
                        {{question.paperDetailQuestion.writerTopic}}
                    </label>
                </div>
                <form role="form">
                    <div class="form-group">
                        <textarea class="form-control" rows="5" v-model="question.paperDetailQuestion.studentAnswer"></textarea>
                    </div>
                </form>
                <label>{{create(question.paperQuestionNumber,0,0)}}</label>
            </div><br>
        </div>
    </div>
    <button class="btn-outline-info" @click="getAnswer()">交卷</button>
</div>
<script>
    var paperid = window.location.href.split("=")[1];
    var first = window.location.href.split("=")[2];
    paperid = paperid.replace("&first","");
    var anse = -1;
    var mnum = 0;
    var nums = [];
    var sanswers = [];
    var loadNum = 0;
    var abc = new Vue({
        el:"#app",
        data:{
            questions:[],
            paper:"",
            answers: [],
            remainTime:"",
        },
        methods:{
            add:function(){
                anse += 1;
                return anse;
            },
            sub:function(){
                anse -= 1;
                console.log((anse))
                return anse;
            },
            addMnum:function () {
                mnum += 1;
                return mnum;
            },
            backMnum:function () {
                mnum = 0;
                return mnum;
            },
            create:function (parentnum,typeid,chidnum) {
                console.log(loadNum);
                if(loadNum!=0){
                    return;
                }
                console.log(nums.length+"->flag:"+loadNum);
                if(typeid==1){
                    chidnum = mnum;
                }
                let data = {
                    "parentnum":parentnum,
                    "chidnum":chidnum
                };
                nums.push(data);
            },
            changeNum:function () {
               loadNum = 1;
            },
            forsanswers:function () {
                console.log("长度："+sanswers.length)
                for (const sanswer of sanswers) {
                    console.log(sanswer);
                }
            },
            updateAnswer:function(){
                setTimeout(function () {
                    abc.collectValue();
                    let datas = {
                        "nums":JSON.stringify(nums),
                        "paperid":paperid
                    }
                    let params = new URLSearchParams();
                    params.append("nums",JSON.stringify(nums));
                    params.append("paperid",paperid);
                    axios.post("../task/updateAnswer",params).then(
                        (res) => {
                        }
                    );
                },"1000")
            },
            submitPaper:function () {
                abc.collectValue();
               let datas = {
                   "nums":JSON.stringify(nums),
                   "paperid":paperid
               }
               let params = new URLSearchParams();
               params.append("nums",JSON.stringify(nums));
               params.append("paperid",paperid);
               axios.post("../task/submitPaper",params).then(
                    (res) => {
                        if (res.data.code===200) {
                            layer.msg("交卷成功");
                        }else{
                            layer.msg("您已超时提交，超时作答的答案会提交失败!");
                        }
                        setTimeout(function () {
                            location.href = "test.html";
                        },"1000")

                    }
                );
            },
            collectValue:function(){
                sanswers=[];
                for (let question of this.questions) {
                    if(question.paperQuestionBank==1){
                        console.log(question.paperQuestionNumber);
                        sanswers.push(question.paperDetailQuestion.studentAnswer);
                    }else if(question.paperQuestionBank==2){
                        console.log(question.paperQuestionNumber);
                        sanswers.push(question.paperDetailQuestion.studentAnswer);
                    }else if(question.paperQuestionBank==3){
                        console.log(question.paperQuestionNumber);
                        if (question.paperDetailQuestion.selectBanks!=null){
                            for (const selectBank of question.paperDetailQuestion.selectBanks) {
                                sanswers.push(selectBank.studentAnswer);
                            }
                        }
                        if(question.paperDetailQuestion.vacancyBanks!=null){
                            for (const vacancyBank of question.paperDetailQuestion.vacancyBanks) {
                                sanswers.push(vacancyBank.studentAnswer);
                            }
                        }
                        if (question.paperDetailQuestion.judgeBanks!=null){
                            for (const judgeBank of question.paperDetailQuestion.judgeBanks) {
                                sanswers.push(judgeBank.studentAnswer);
                            }
                        }
                    }else if(question.paperQuestionBank==4){
                        console.log(question.paperQuestionNumber);
                        for (const clozeSelect of question.paperDetailQuestion.clozeSelects) {
                            sanswers.push(clozeSelect.studentAnswer);
                        }
                    }else if(question.paperQuestionBank==6){
                        console.log(question.paperQuestionNumber);
                        sanswers.push(question.paperDetailQuestion.studentAnswer);
                    }else if(question.paperQuestionBank==7){
                        console.log(question.paperQuestionNumber);
                        sanswers.push(question.paperDetailQuestion.studentAnswer);
                    }
                }
                console.log("sanswers.length1:"+sanswers.length);
                console.log("nums.length1:"+nums.length);
                for (let i = 0; i < nums.length; i++) {
                    nums[i].sanswer = sanswers[i];
                }
                console.log("sanswers.length2:"+sanswers.length);
                console.log("nums.length2:"+nums.length);
            },
            getAnswer:function () {
                if (abc.remainTime>15){
                    layer.msg("不得提前15分钟交卷，您可以再检查检查");
                    return;
                }
                layer.confirm('您确定要交卷吗？',{
                    btn:['确定','取消']
                },function () {
                    abc.submitPaper();
                },function () {
                })
            },
            getRemain:function () {
                axios.get("../task/getRemain/"+paperid).then(
                    res => {
                        console.log(res.data);
                       if (res.data<=0){
                            this.remainTime = 0;
                            layer.msg("考试时间已结束，已为你自动交卷");
                           clearInterval(timeer);
                       }else{
                           this.remainTime = res.data;
                       }
                    }
                )
            }
        },
        mounted(){
            axios.get("../task/getRemotePaper/"+paperid+"/"+first).then(
                res => {
                    if (res.data.code===200){
                        abc.questions = res.data.data.paperQuestions;
                        abc.paper = res.data.data;
                        console.log(abc.questions);
                        setTimeout(function () {
                            abc.getRemain();
                        },"500");
                    }else{
                        layer.alert("网络繁忙，请稍后再试");
                    }
                }
            );
        },
        watch:{
            "questions":{
                handler:function () {
                    this.$nextTick(function () {
                        if (loadNum===0){
                            loadNum=1;
                        }
                    });
                    abc.updateAnswer();
                },
                deep:true,
            }
        }


    });
    var timeer = setInterval(function () {
        abc.getRemain();
    },"60000");
</script>
</body>
</html>